<template>
  <div>
    <i-page-header class="product_tabs" title="角色配置"></i-page-header>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <el-form ref="form" label-width="120px" label-position="left">
        <div v-for="(item, index) in data" :key="index">
          <el-card class="box-card" style="margin-bottom: 10px">
            <div slot="header" class="clearfix">
              <span>{{ item.title }}</span>
              <el-button
                @click="tapSelect(index)"
                style="float: right; padding: 3px 0"
                type="text"
              >
                {{ checkAr[index] ? '取消' : '全选' }}
              </el-button>
            </div>
            <div style="margin-left: 20px">
              <div v-for="(item2, index2) in item.children" :key="index2">
                <el-form-item :label="item2.title">
                  <div class="fx-r">
                    <div
                      class="mr20"
                      v-for="(item3, index3) in item2.children"
                      :key="index3"
                    >
                      <el-checkbox
                        size="small"
                        border
                        v-model="checkData['check_' + item3.id]"
                        :label="item3.title"
                      ></el-checkbox>
                    </div>
                  </div>
                </el-form-item>
              </div>
            </div>
          </el-card>
        </div>
      </el-form>
      <div class="role-foot fx-r fx-bc fx-ac">
        <el-button type="primary" @click="submit">立即设置</el-button>
      </div>
    </Card>
  </div>
</template>

<script>
import IPageHeader from '../../../../layouts/system/page-header/index'
import {
  SystemRoleStingList,
  SystemRoleStingSave,
} from '../../../../api/system/role'
import PageCache from '../../../../utils/PageCache'

var pageCache = null
export default {
  name: 'seting',
  components: { IPageHeader },
  computed: {},
  data() {
    return {
      loading: false,
      data: [],
      checkData: {},
      id: 0,
      checkAr: [],
    }
  },

  created() {
    //this.initView();
    pageCache = new PageCache(this)
  },

  mounted() {
    this.initView()
  },
  watch: {
    $route(to, from) {
      pageCache.routeView(to, (type, data) => {
        if (type == 'update') {
          this.initView()
        }

        if (type == 'cache') {
          this.$forceUpdate()
          Object.assign(this.$data, data)
        }
      })
    },
  },

  methods: {
    initView: function () {
      this.id = this.$route.query.id || 0
      SystemRoleStingList({ id: this.id })
        .then((res) => {
          this.loading = false
          if (res.code == 200) {
            this.data = res.data.data
            this.getCheckData(res.data.seting)
            for (var i in this.data) {
              this.checkAr[i] = false
            }
          }
        })
        .catch((err) => {
          console.log(err)
          this.loading = false
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    /**
     * 提交数据
     */
    submit: function () {
      this.$utils.loading(this, '加载中...')
      SystemRoleStingSave({ id: this.id, data: this.checkData })
        .then((res) => {
          if (res.code == 200) {
            this.$utils.loadingClose()
            this.$message({
              message: '恭喜你，修改成功',
              type: 'success',
            })
          } else {
            this.$alert(res.msg)
          }
        })
        .catch((err) => {
          this.$utils.loadingClose()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },
    /**
     * 全选数据
     * @param index
     */
    tapSelect: function (index) {
      var bool = !this.checkAr[index]
      for (var i in this.data[index].children) {
        for (var iv in this.data[index].children[i].children) {
          var d = this.data[index].children[i].children[iv]
          this.$set(this.checkData, 'check_' + d.id, bool)
        }
      }
      this.checkAr[index] = bool
    },

    getCheckData: function (seting) {
      var ck = {}
      for (var i in this.data) {
        var data = this.data[i]
        for (var j in data.children) {
          var udata = data.children[j]
          for (var m in udata.children) {
            var id = udata.children[m].id
            ck['check_' + id] = this.findData(id, seting)
          }
        }
      }
      this.checkData = ck
    },
    findData: function (id, seting) {
      for (var i in seting) {
        if (i.replace('check_', '') == id) {
          return true
        }
      }
      return false
    },
  },
}
</script>
<style scoped>
.role-info {
  padding: 20px 0;
  border-bottom: 1px solid #f1f1f1;
}

.role-foot {
  margin: 20px 0;
}
</style>
